<template>
	<view>
		<view id="head">
			<navigator url="check">返回</navigator>
			<view>收费</view>
			<navigator url="xinzengshoufei">新增</navigator>
		</view>
		<view id="select">
				<text>收费时间</text>
			<picker mode="date" fields="month" @change="getstart">
				<view>{{starttime}}</view>
			</picker>
			<picker mode="date" fields="month" @change="getend">
				<view>{{endtime}}</view>
			</picker>
			<button @click="search">查询</button>
		</view>
		<view id="content">
			<view class="item" v-for="(item , index) in dbdata" :key="index">
				<view class="left">
					<text>送达日期</text>
					<text>送达人</text>
					<text>接收人</text>
				</view>
				<view class="right">
					<text>{{item.time}}</text>
					<text>{{item.sd}}</text>
					<text>{{item.js}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		computed,
		reactive,
		toRefs,
		onMounted
	} from 'vue';
	import http from '../../utils/http.js'
	export default {
		setup() {
			let data = reactive({
				dbdata: [],
				starttime: '',
				endtime: '',
				getstart: (ev) => {
					data.starttime = ev.detail.value
					console.log(ev.detail.value)
				},
				getend: (ev) => {
					data.endtime = ev.detail.value
					console.log(ev.detail.value)
				},
				search: function() {
					http({
						url: '/wx/getshoufei',
						data: {
							starttime: data.starttime,
							endtime: data.endtime
						},
					}).then((res) => {
						console.log(res);
						data.dbdata = res.data.data;
					})

				}
			})
			onMounted(() => {
				http({
					url: '/wx/initsf',
					data: {
						starttime: data.starttime,
						endtime: data.endtime
					},
				}).then((res) => {
					console.log(res);
					data.dbdata = res.data.data;
				})
			})
			return {
				...toRefs(data)
			};
		},
	}
</script>

<style>
	#head {
		width: 750rpx;
		display: flex;
		justify-content: space-between;
	}

	#head text {
		flex: 1;
	}

	#head navigator {
		font-size: 30rpx;
		border: none;
		background-color: transparent;
		color: blue;
	}

	#select {
		display: flex;
		width: 750rpx;
		height: 80rpx;
		align-items: center;
		border-top: black #C6C6C6 1rpx;
		justify-content: space-around;
	}
	#select text{
		margin-left: 10rpx;
		height: 40rpx;
		line-height: 40rpx;
		flex: 8;
	}
	#select view {
		text-align: center;
		line-height: 40rpx;
		margin: 40rpx 10rpx;
		flex: 4;
		width: 200rpx;
		height: 40rpx;
		border: solid #C6C6C6 1rpx;
		border-radius: 20rpx;
	}

	#select button {
		background-color: #93d5dc;
		line-height: 40rpx;
		font-size: 10rpx;
		flex:5;
		height: 40rpx;
		border: none;
		margin-right: 10rpx;
	}

	#content {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		border-top: #C6C6C6 solid 1rpx;
	}

	.item {
		margin: 20rpx 0;
		padding: 10rpx 20rpx;
		vertical-align: middle;
		display: flex;
		flex-direction: row;
		width: 750rpx;
		border-bottom: 1rpx #C6C6C6 solid;
	}

	.left {
		padding-top: 40rpx;
		padding-left: 40rpx;
		font-weight: bold;
	}

	.right {
		padding-top: 40rpx;
		padding-right: 40rpx;
	}

	.item view {
		flex-direction: column;
		display: flex;
		flex: 1;
		height: 200rpx;
		width: 370rpx;
	}

	#content view text {
		flex: 1;
	}
</style>
